<template>
    <div>
        <loginTop title="登录">
            <div slot="right" @click="$router.push('/register')">注册</div>
        </loginTop>
        <loginText label="真实姓名" placeholder="" style="margin: 15px 0"
                   @inputChange="content=> params.name =content"></loginText> <!--和事件绑定的方法不需要带()-->
        <div class="login-section">
            <div @click="$router.push('/login')">
                <span>密码登录</span>
                <van-icon class="faceLogin-icon" name="exchange"></van-icon>
            </div>
        </div>
        <div class="submit">
            <van-uploader class="uploading" :after-read="afterRead" preview-size="100vw"/>
            <van-button class="submit-button">上传图片</van-button>
        </div>
    </div>
</template>
<script>
    import loginTop from "@/components/common/loginTop.vue"
    import loginText from "@/components/common/loginText.vue";
    import loginBtn from "@/components/common/loginBtn";

    export default {
        data() {
            return {
                params: {name: '', password: ''}
            }
        },
        name: "register",
        components: {
            loginTop,
            loginText,
            loginBtn
        },
        methods: {
            successInp(content) { // 这个content是在 loginText里面发送的事件 附带的值
                console.log(content)
            },
            afterRead(file) {
                const formData = new FormData()
                formData.append("file", file.file)
                formData.append("name", this.params.name)
                const rule = RegExp("^.{2,16}$")
                if (rule.test(this.params.name)) {
                    this.$http.post("/user/faceLogin", formData).then((res) => {
                        if (res.data.code == 0) {
                            localStorage.setItem("token", res.data.data.token)
                            setTimeout(() => {
                                this.$router.push("/")
                            }, 1000)
                        }
                    })
                } else {
                    this.$msg.fail("请输入姓名")
                }
            }
        }
    }
</script>

<style lang="scss">
    .login-section {
        position: relative;
        height: 30px;

        > div {
            display: flex;
            align-items: center;
            position: absolute;
            justify-content: center;
            top: 5px;
            right: 15px;
            height: 30px;
            border-radius: 15px;
            color: #aaaaaa;
            width: 130px;
            background: #b3d4fc;

            .faceLogin-icon {
                color: green;
                margin-left: 4px;
            }
        }
    }

    .submit {
        display: flex;
        position: relative;
        overflow: hidden;
        height: 50px;
        justify-content: center;
        margin: 4.17vw;

        .submit-button {
            color: white;
            width: 200px;
            background-color: #ff9db5;
            border-radius: 25px;
        }

        .uploading {
            z-index: 5;
            position: absolute;
            opacity: 0;
        }
    }
</style>